<script setup>
import { ref } from 'vue'
import ActionButton from './ActionButton.vue'

const props = defineProps({
  plant: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close'])

const actions = ref([
  { name: '浇水', icon: '💧', action: 'water' },
  { name: '施肥', icon: '🌱', action: 'fertilize' },
  { name: '修剪', icon: '✂️', action: 'trim' },
  { name: '晒太阳', icon: '☀️', action: 'sunbathe' }
])

const handleAction = (action) => {
  console.log(`Performing ${action} on plant:`, props.plant.id)
  // 这里可以添加实际的操作逻辑
}
</script>

<template>
  <div class="detail-overlay" @click="emit('close')">
    <div class="detail-modal" @click.stop>
      <button class="close-button" @click="emit('close')">×</button>
      
      <div class="detail-content">
        <div class="plant-image">
          <img :src="plant.image" :alt="plant.name">
        </div>
        
        <div class="plant-info">
          <h2>{{ plant.name }}</h2>
          <p class="species">{{ plant.species }}</p>
          
          <div class="status-section">
            <h3>植物状态</h3>
            <div class="status-grid">
              <div class="status-item">
                <span>健康度</span>
                <div class="progress-bar">
                  <div class="progress" :style="{ width: plant.health + '%', backgroundColor: '#42b983' }"></div>
                </div>
              </div>
              <div class="status-item">
                <span>水分</span>
                <div class="progress-bar">
                  <div class="progress" :style="{ width: plant.water + '%', backgroundColor: '#4a90e2' }"></div>
                </div>
              </div>
              <div class="status-item">
                <span>光照</span>
                <div class="progress-bar">
                  <div class="progress" :style="{ width: plant.light + '%', backgroundColor: '#f1c40f' }"></div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="actions-section">
            <h3>可用操作</h3>
            <div class="actions-grid">
              <ActionButton 
                v-for="action in actions"
                :key="action.action"
                :icon="action.icon"
                :name="action.name"
                @click="handleAction(action.action)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.detail-modal {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 24px;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.detail-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
}

.plant-image {
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.plant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plant-info h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
}

.species {
  color: #666;
  margin: 8px 0 24px;
}

.status-section,
.actions-section {
  margin-bottom: 24px;
}

.status-section h3,
.actions-section h3 {
  color: #2c3e50;
  margin-bottom: 16px;
}

.status-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
}
</style> 